<template>
    <el-dialog :close-on-click-modal="false" :visible.sync="addVisible" width="80%" class="copyAblityForm" :show-close='false'>
        <span slot="title" class="dialog-title">
            复制检测项目
            <el-button @click="closeAbility" size="mini" class="popupClose">关闭</el-button>
        </span>
        <el-form :inline="true" label-width = "100px" class="demo-form-inline" ref="formItemData" :model="formItemData" :rules = "formItemRule">

            <el-form-item label="集合名称:" style="width:48%;" prop="name">
                <el-input placeholder="集合名称" size="mini" v-model="formItemData.name"></el-input>
            </el-form-item>
            <el-form-item label="集合用途:" style="width:48%;" prop="purpose">
                <el-input size="mini" placeholder="集合用途" v-model="formItemData.purpose"></el-input>
            </el-form-item>
        </el-form>
        <el-table :data="formItemData.detectBeans" style="width: 100%;height:calc(100% - 55px);" class="tableCon" size="mini">
            
            <el-table-column label="序号" min-width="45px">
                <template slot-scope="scope">
                    {{scope.$index+1}}
                </template>
            </el-table-column>
            <el-table-column property="itemNames" label="检测项目" min-width="200px" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="能力参数" property="detectabilityName" min-width="200px">
            </el-table-column>
            <el-table-column label="操作"  min-width="120px">
                <template slot-scope="scope">
                    <el-button @click="deleteAbility(scope.$index)" type = "text" size="mini" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        
        <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="subCopy" size="mini">确 定</el-button>
			    <el-button @click="closeAbility" size="mini">取 消</el-button>
			  </span>
    </el-dialog>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        data() {
            return {
                formItemRule:{
                   name: [{ required: true, message: '请填写名字', trigger: 'blur' }]
                }

            }
        },
        computed: {
            ...mapState([]),
        },
        watch: {
            addVisible(val) {
                if (val) {
                    

                }
            },
           
            

        },
        props: ['formItemData', 'addVisible'],
        methods: {
            subCopy(){
                // this.formItemData.detectBeans = this.abilityAndItem;
                this.$http({
                    method: 'post',
                    apiUrl: '/detection/copyItemSet.htm',
                    params: this.formItemData,
                    isJson:true,
                }).then(res => {
                    if (res.code === 0) {
                        this.$notify({
                            title:"成功",
                            message:"复制成功！",
                            type:'success'
                        });
                        this.$parent.readItemSet();
                        this.closeAbility();
                        
                    }
                })

            },
            deleteAbility(index){
                this.formItemData.detectBeans.splice(index,1)
            },
           
            //关闭弹框
            closeAbility() {
                this.$emit("update:addVisible", false)
               
            },

        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
    

     .copyAblityForm .el-dialog {
        height: 70%;
    }

     .copyAblityForm .el-dialog .el-form-item {
        margin-bottom: 20px;
    }

     .copyAblityForm .el-dialog .el-dialog__body {
        height: calc(100% - 85px);
        padding: 10px;
    }

     .copyAblityForm .el-dialog .el-dialog__body .form {
        height: 60px;
    }

     .copyAblityForm .el-dialog .el-dialog__body .ablityItem {
        height: 100%;
        padding: 0 20px;
    }

     .copyAblityForm .el-dialog .el-dialog__footer {
        height: 45px;
        line-height: 45px;
        padding: 0 20px !important;
    }
    .copyAblityForm .tableCon .el-table__fixed-body-wrapper,
    .copyAblityForm .tableCon .el-table__body-wrapper {
        height: calc(100% - 46px);
    }

   
</style>